@import "../_variables";

// Notes: Only works in WebKit for now
// is this acceptable to our goals?

// Fallback
// Apply this style only on WebKit
// To prevent ugly styles on non-WebKit Browser
@media screen and (-webkit-min-device-pixel-ratio:0) {
  
  .effeckt-ckbox-ios7[type=checkbox],
.effeckt-rdio-ios7[type=radio] {

  // Not caught by autoprefixer
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  box-shadow: inset 0px 0px 0px 1px #e6e6e6;
  border-radius: $effeckt-form-element-ckradio-ios7border-radius;
  cursor: pointer;
  display: inline-block;
  height: 31px;
  padding: 1px;
  position: relative;
  margin: 0px;
  width: 52px;
  outline: 0;
  transition: $effeckt-form-element-ckradio-ios7transition;
  transform: scale(1); // Adjust size here
  background: $effeckt-form-element-ckradio-ios7bg-off;
}

.effeckt-ckbox-ios7[type=checkbox]:checked,
.effeckt-rdio-ios7:checked {
  box-shadow: inset 0px 0px 0px 20px $effeckt-form-element-ckradio-ios7bg-on;
}

.effeckt-ckbox-ios7[type=checkbox]:after,
.effeckt-rdio-ios7[type=radio]:after {
  box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
  border-radius: $effeckt-form-element-ckradio-ios7border-radius;
  content: '';
  cursor: pointer;
  height: 29px;
  position: absolute;
  width: 29px;
  transition: $effeckt-form-element-ckradio-ios7transition-after;
  background: $effeckt-form-element-ckradio-ios7bg-off;
}

.effeckt-ckbox-ios7[type="checkbox"]:checked:after,
.effeckt-rdio-ios7[type="radio"]:checked:after {
  left: 22px;
}


// Android

.effeckt-ckbox-android[type=checkbox],
.effeckt-rdio-android[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: inset 0px 0px 0px 1px #e6e6e6;
  border-radius: 1px;
  cursor: pointer;
  display: inline-block;
  height: 21px;
  padding: 1px;
  position: relative;
  margin: 0px;
  width: 72px;
  outline: 0;
  -webkit-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  background: #333;
}

.effeckt-ckbox-android[type=checkbox]:checked,
.effeckt-rdio-android:checked {
  box-shadow: inset 0px 0px 0px 20px #666666;
}

.effeckt-ckbox-android[type=checkbox]:after,
.effeckt-rdio-android[type=radio]:after {
  box-shadow: 0px 0px 0px 0px ;
  border-radius: 1px;
  content: '';
  cursor: pointer;
  height: 19px;
  position: absolute;
  width: 29px;
  -webkit-transition: all 0.1s ease-in 0.1s;
  -o-transition: all 0.1s ease-in 0.1s;
  transition: all 0.1s ease-in 0.1s;
  background: #4d4d4d; 
}

.effeckt-ckbox-android[type="checkbox"]:checked:after,
.effeckt-rdio-android[type="radio"]:checked:after {
  left: 43px;
}

}
